<template>
  <el-dialog v-model="dialogVisible" :title="title" width="700px" :append-to-body="true" :before-close="handleClose">
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm" status-icon>
    <el-form-item label="新闻图片" prop="imgUrl">
      <el-upload
    class="avatar-uploaders"
    :action="HTTP_URI.UPLOADFILE"
    :show-file-list="false"
    :headers="headers"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload"
  >
    <img v-if="ruleForm.imgUrl" :src="ruleForm.imgUrl" class="avatar" />
    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
  </el-upload>
        <el-input placeholder="请输入" v-model="ruleForm.imgUrl" v-show="false" />
      </el-form-item>
      <el-form-item label="新闻标题" prop="title">
        <el-input placeholder="请输入" v-model="ruleForm.title" />
      </el-form-item>
      <el-form-item label="链接来源" prop="laiyuan">
        <el-input placeholder="请输入" v-model="ruleForm.laiyuan" />
      </el-form-item>
      <el-form-item label="简介" prop="remark">
        <el-input placeholder="请输入" type="textarea" show-word-limit maxlength="140" v-model="ruleForm.remark" />
      </el-form-item>
      <el-form-item label="内容" prop="contant">
        <Editor :value="ruleForm.contant" @updateValue="getValue"></Editor>
      </el-form-item>
       <el-form-item label="是否置顶" prop="isTop">
        <el-select style="width: 100%" v-model="ruleForm.isTop" placeholder="请选择">
          <el-option label="是" value="1"></el-option>
          <el-option label="否" value="0"></el-option>
        </el-select>
      </el-form-item>
      
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCloses(ruleFormRef)">取消</el-button>
        <el-button type="primary" @click="submit(ruleFormRef)">
          确 认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { h, ref } from 'vue'
import { ElMessage, FormInstance } from 'element-plus'
import { REQUEST } from '@/api/request'
import { Plus } from '@element-plus/icons-vue'
import HTTP_URI from '@/api/base_url'
import { getToken } from '@/plugins/cookie'
const ruleFormRef = ref<FormInstance>()
const title = ref('')
const dialogVisible = ref(false)
const emits = defineEmits(['ok'])
const headers = ref({
  'Token':getToken()
})
const ruleForm = ref({
  id: '',
  laiyuan: '',
  remark:'',
  type:'1',
  isTop:'0',
  imgUrl:'',
  contant:'',
  title:''
})
const options = ref([])
const rules = ref({
  laiyuan: [{ required: true, message: '请输入来源', trigger: 'change' }],
  title: [{ required: true, message: '请输入车牌号', trigger: 'change' }],
  isTop: [{ required: true, message: '请选择是否置顶', trigger: 'change' }],
  imgUrl: [{ required: true, message: '请上传图片', trigger: 'change' }],
  contant: [{ required: true, message: '请输入新闻内容', trigger: 'change' }]

})
const getValue = (res: any) => {
  ruleForm.value.contant = res
}
const openModal = (t: any, e: any) => {
  ruleForm.value = {
    id: '',
    isTop:'',
    laiyuan: '',
    type:'1',
    remark:'',
    imgUrl:'',
    contant:'',
    title:''
  }
  dialogVisible.value = true
  title.value = t
  if (e) {
    ruleForm.value = e
  }
}
const handleAvatarSuccess = (response:any) => {
  ruleForm.value.imgUrl = response.data.url
}

const beforeAvatarUpload= (rawFile:any) => {
  if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png') {
    ElMessage.error('上传图片格式仅支持jpg、png')
    return false
  } else if (rawFile.size / 1024 / 1024 > 10) {
    ElMessage.error('图片大小不能超过 10MB')
    return false
  }
  return true
}

const handleClose = () => {
  dialogVisible.value = false
  emits('ok')
}
const handleCloses = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  emits('ok')
  dialogVisible.value = false
}
const submit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      if (title.value === '新增行业新闻') {

        // REQUEST.POST('USERADD', ruleForm.value).then((res: any) => {
        //   if (res.status === 200) {
        //     ElMessage({
        //       type: 'success',
        //       message: '添加成功！'
        //     })
        //     formEl.resetFields()
        //     dialogVisible.value = false
        //     emits('ok')
        //   } else {
        //     ElMessage({
        //       type: 'warning',
        //       message: res.message
        //     })
        //   }
        // })
      } else {
        // REQUEST.POST('USERSETTING', ruleForm.value).then((res: any) => {
        //   if (res.status === 200) {
        //     ElMessage({
        //       type: 'success',
        //       message: '设置成功！'
        //     })
        //     dialogVisible.value = false
        //     formEl.resetFields()
        //     emits('ok')
        //   } else {
        //     ElMessage({
        //       type: 'warning',
        //       message: res.message
        //     })
        //   }
        // })

      }
    }
  })
}
defineExpose({ openModal })
</script>

<style lang="scss" scoped>
.avatar-uploaders{
  width: 120px;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px #dcdfe6 dashed;
  cursor: pointer;
  border-radius: 5px;
}
.avatar-uploaders:hover{
  border: 1px #409eff dashed;
}
.avatar-uploader-icon{
  font-size: 32px;
  color: #cccccc;
}
.avatar-uploaders .avatar {
  width: 120px;
  height: 120px;
  display: block;
}
</style>
